<template>
  <el-drawer
    v-model="visibleDrawer"
    :destroy-on-close="true"
    :with-header="false"
    size="50%"
  >
    <el-form :model="formQuestion" ref="formRef">
      <el-form-item label="题目标题:">
        <el-input
          style="width: 387px !important"
          v-model="formQuestion.title"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="题目难度:">
        <QuestionSelector
          style="width: 387px !important"
          v-model="formQuestion.difficulty"
          width="100%"
          placeholder="请选择题目难度"
        ></QuestionSelector>
      </el-form-item>
      <el-form-item label="时间限制（单位毫秒）:">
        <el-input
          style="width: 300px !important"
          v-model="formQuestion.timeLimit"
          placeholder="请输入时间限制"
        ></el-input>
      </el-form-item>
      <el-form-item label="空间限制（单位字节）:">
        <el-input
          style="width: 300px !important"
          v-model="formQuestion.spaceLimit"
          placeholder="请输入空间限制"
        ></el-input>
      </el-form-item>
      <el-form-item label="题目内容:">
        <div class="editor">
          <quill-editor
            placeholder="请输入题目内容"
            v-model:content="formQuestion.content"
            content-type="html"
          ></quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="题目用例:">
        <el-input
          style="width: 387px !important"
          v-model="formQuestion.questionCase"
          placeholder="请输入题目用例"
        ></el-input>
      </el-form-item>
      <el-form-item label="默认代码块:">
        <code-editor
          @update:value="handleEditorContent"
          ref="defaultCodeRef"
        ></code-editor>
      </el-form-item>
      <el-form-item label="main函数:">
        <code-editor
          @update:value="handleEditorMainFunc"
          ref="mainFucRef"
        ></code-editor>
      </el-form-item>
      <el-form-item>
        <el-button
          class="question-button"
          type="primary"
          plain
          @click="onSubmit()"
        >
          发布
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
  import { QuillEditor } from '@vueup/vue-quill'
  import '@vueup/vue-quill/dist/vue-quill.snow.css'
  import CodeEditor from './CodeEditor.vue'
  import QuestionSelector from './QuestionSelector.vue'
  import { ElMessage } from 'element-plus'
  import { ref, reactive } from 'vue'
  import {
    addQuestionApi,
    getQuestionDetailApi,
    editQuestionApi
  } from '@/api/question.js'
  // 控制表单抽屉是否显示
  const visibleDrawer = ref(false)
  // 表单数据响应式对象
  const formQuestion = reactive({
    questionId: '',
    title: '',
    difficulty: '',
    content: '',
    questionCase: '',
    timeLimit: '',
    spaceLimit: '',
    defaultCode: '',
    mainFuc: ''
  })
  // 代码编辑器:默认代码块实例
  const defaultCodeRef = ref()
  // 代码编辑器:主函数代码块实例
  const mainFucRef = ref()
  // 控制表单抽屉显示
  async function open(questionId) {
    visibleDrawer.value = true
    for (const key in formQuestion) {
      if (formQuestion.hasOwnProperty(key)) {
        formQuestion[key] = ''
      }
    }
    // 编辑
    if (questionId) {
      const questionDetail = await getQuestionDetailApi(questionId)
      Object.assign(formQuestion, questionDetail)
      defaultCodeRef.value.setAceCode(formQuestion.defaultCode)
      mainFucRef.value.setAceCode(formQuestion.mainFuc)
    }
  }
  // 将open函数暴露给父组件使用
  defineExpose({
    open
  })
  // 表单数据校验
  function validate() {
    let msg = ''
    if (!formQuestion.title) {
      msg = '请添加题目标题'
    } else if (formQuestion.difficulty == '') {
      msg = '请选择题目难度'
    } else if (!formQuestion.timeLimit) {
      msg = '请输入时间限制'
    } else if (!formQuestion.spaceLimit) {
      msg = '请输入空间限制'
    } else if (!formQuestion.content) {
      msg = '请输入题目内容信息'
    } else if (!formQuestion.questionCase) {
      msg = '请输入题目用例名称'
    } else if (!formQuestion.defaultCode) {
      msg = '请输入默认代码'
    } else if (!formQuestion.mainFuc) {
      msg = '请输入main函数'
    } else {
      msg = ''
    }
    return msg
  }
  // 子组件通知父组件提交成功事件
  const emit = defineEmits(['success'])
  // 提交新增/编辑
  async function onSubmit() {
    // 参数校验
    const errorMessage = validate()
    if (errorMessage) {
      ElMessage.error(errorMessage)
      return false
    }
    // 根据是否有questionId判断是新增还是编辑
    if (formQuestion.questionId) {
      // 编辑题目请求
      await editQuestionApi(formQuestion)
      ElMessage.success('编辑成功')
      emit('success', 'edit')
    } else {
      // 添加题目请求
      await addQuestionApi(formQuestion)
      ElMessage.success('添加成功')
      emit('success', 'add')
    }
    visibleDrawer.value = false
  }
  // 代码编辑器默认代码块内容获取
  function handleEditorContent(content) {
    formQuestion.defaultCode = content
  }
  // 代码编辑器主函数代码块内容获取
  function handleEditorMainFunc(content) {
    formQuestion.mainFuc = content
  }
</script>

<style lang="scss">
  .question-button {
    width: 200px;
  }
</style>
